<!--
 * @file 富文本编辑器
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2022/07/27
-->
<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    ></editor>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
// 用了自己处理过的插件
// import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/link'
import 'tinymce/plugins/print'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/code'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/help'
// 自己处理的插件
import './plugins/formatpainter.js'
import './plugins/image.js'
// import './plugins/test.js'

export default defineComponent({
  name: 'ItsEditor',
  components: {
    Editor,
  },
  props: {
    value: {
      type: String,
      required: false,
    },
    triggerChange: {
      type: Boolean,
      default: false,
      required: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default: function () {
        return [
          'advlist autolink lists link image charmap print preview',
          'searchreplace visualblocks fullscreen',
          'insertdatetime media table code help wordcount formatpainter', // 加test时加入 test
        ]
      },
    },
    toolbar: {
      type: [String, Array],
      default:
        'undo redo ' +
        '| fontselect ' +
        '| fontsizeselect ' +
        '| formatselect ' +
        '| lineheight bold italic forecolor backcolor formatpainter ' +
        '| alignleft aligncenter alignright alignjustify ' +
        '| bullist numlist outdent indent ' +
        '| image media table link charmap insertdatetime ' +
        '| searchreplace preview visualblocks code wordcount print ' +
        '| removeformat help fullscreen', // 加test时加入 | test
    },
  },
  data() {
    return {
      // 初始化配置
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/lightgray',
        icons_url: '/tinymce/icons.js', // load icon pack
        icons: 'test',
        height: 300,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px', // 字体大小设置
        images_upload_handler: (blobInfo, success) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        },
      },
      myValue: this.value,
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    /**
     * 编辑器被点击
     * @param {object} 事件源
     */
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    /**
     * 清空内容
     */
    clear() {
      this.myValue = ''
    },
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      if (this.triggerChange) {
        this.$emit('change', newValue)
      } else {
        this.$emit('input', newValue)
      }
    },
  },
})
</script>
<style scoped>
</style>
